<template>
  <div class="have">
    <!-- <header-com :title="title" moduleName="matchStatistics"></header-com> -->
    <div class="header">
      <a :href="formalUrl"
        ><i class="iconfont icon-zuo" style="flex: 0.2"></i
      ></a>
      <span>{{ title }}</span>
      <!-- <img :src="getlist.logo" alt="" v-if="getlist.logo"> -->
    </div>
    <matchBattle
      :matchs="battleList"
      class="battle"
      :not_shadow="not_shadow"
    ></matchBattle>
    <LiveVideo
      v-if="liveStatus"
      :cover="cover"
      :device_url="device_url"
    ></LiveVideo>
    <div class="tabs">
      <div
        class="tabs_coulm"
        :class="{ active: selected == index }"
        v-for="(slide, index) in titles"
        :key="index"
        @click.stop="tabChoose(index)"
      >
        {{ slide }}
      </div>
    </div>
    <!-- selected == 0 -->
    <div v-if="selected == 0" style="margin-bottom: 1rem">
      <div class="name">
        <div>{{ userA }}</div>
        <div class="disk">
          <span
            class="tabs_coulm"
            :class="{ actives: selecteds == index }"
            v-for="(slide, index) in disk"
            :key="index"
            @click.stop="disks(index)"
            >{{ slide }}</span
          >
        </div>
        <div>{{ userB }}</div>
      </div>
      <div v-if="show" style="background: #fff">
        <div class="aces">
          <div class="aces_title">
            <div>{{ aces.ace_num_a }}</div>
            <div>ACES</div>
            <div>{{ aces.ace_num_b }}</div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{ color_one: aces.ace_num_a > aces.ace_num_b }"
                :style="{
                  width:
                    '' +
                    (aces.ace_num_a / (aces.ace_num_a + aces.ace_num_b)) * 100 +
                    '%',
                }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{ color_one: aces.ace_num_b > aces.ace_num_a }"
                :style="{
                  width:
                    '' +
                    (aces.ace_num_b / (aces.ace_num_a + aces.ace_num_b)) * 100 +
                    '%',
                }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>{{ aces.double_num_a }}</div>
            <div>双误</div>
            <div>{{ aces.double_num_b }}</div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{ color_one: aces.double_num_a < aces.double_num_b }"
                :style="{
                  width:
                    '' +
                    (aces.double_num_a /
                      (aces.double_num_a + aces.double_num_b)) *
                      100 +
                    '%',
                }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{ color_one: aces.double_num_b < aces.double_num_a }"
                :style="{
                  width:
                    '' +
                    (aces.double_num_b /
                      (aces.double_num_a + aces.double_num_b)) *
                      100 +
                    '%',
                }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>
              {{ aces.first_send_win_a }}/{{ aces.first_send_total_a }}({{
                aces.first_send_success_a
              }}%)
            </div>
            <div>一发成功率</div>
            <div>
              {{ aces.first_send_win_b }}/{{ aces.first_send_total_b }}({{
                aces.first_send_success_b
              }}%)
            </div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{
                  color_one:
                    aces.first_send_success_a > aces.first_send_success_b,
                }"
                :style="{ width: '' + aces.first_send_success_a + '%' }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{
                  color_one:
                    aces.first_send_success_b > aces.first_send_success_a,
                }"
                :style="{ width: '' + aces.first_send_success_b + '%' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>
              {{ aces.first_send_goal_a }}/{{ aces.first_send_win_a }}({{
                aces.first_send_score_a
              }}%)
            </div>
            <div>一发得分率</div>
            <div>
              {{ aces.first_send_goal_b }}/{{ aces.first_send_win_b }}({{
                aces.first_send_score_b
              }}%)
            </div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{
                  color_one: aces.first_send_score_a > aces.first_send_score_b,
                }"
                :style="{ width: '' + aces.first_send_score_a + '%' }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{
                  color_one: aces.first_send_score_b > aces.first_send_score_a,
                }"
                :style="{ width: '' + aces.first_send_score_b + '%' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>
              {{ aces.second_send_win_a }}/{{ aces.second_send_total_a }}({{
                aces.second_send_success_a
              }}%)
            </div>
            <div>二发成功率</div>
            <div>
              {{ aces.second_send_win_b }}/{{ aces.second_send_total_b }}({{
                aces.second_send_success_b
              }}%)
            </div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{
                  color_one:
                    aces.second_send_success_a > aces.second_send_success_b,
                }"
                :style="{ width: '' + aces.second_send_success_a + '%' }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{
                  color_one:
                    aces.second_send_success_b > aces.second_send_success_a,
                }"
                :style="{ width: '' + aces.second_send_success_b + '%' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>
              {{ aces.second_send_goal_a }}/{{ aces.second_send_win_a }}({{
                aces.second_send_score_a
              }}%)
            </div>
            <div>二发得分率</div>
            <div>
              {{ aces.second_send_goal_b }}/{{ aces.second_send_win_b }}({{
                aces.second_send_score_b
              }}%)
            </div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{
                  color_one:
                    aces.second_send_score_a > aces.second_send_score_b,
                }"
                :style="{ width: '' + aces.second_send_score_a + '%' }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{
                  color_one:
                    aces.second_send_score_b > aces.second_send_score_a,
                }"
                :style="{ width: '' + aces.second_send_score_b + '%' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>
              {{ aces.first_send_goal_a + aces.second_send_goal_a }}/{{
                aces.first_send_win_a + aces.second_send_total_a
              }}({{ aces.serve_score_a }}%)
            </div>
            <div>发球得分率</div>
            <div>
              {{ aces.first_send_goal_b + aces.second_send_goal_b }}/{{
                aces.first_send_win_b + aces.second_send_total_b
              }}({{ aces.serve_score_b }}%)
            </div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{ color_one: aces.serve_score_a > aces.serve_score_b }"
                :style="{ width: '' + aces.serve_score_a + '%' }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{ color_one: aces.serve_score_b > aces.serve_score_a }"
                :style="{ width: '' + aces.serve_score_b + '%' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>
              {{
                aces.first_send_win_b -
                aces.first_send_goal_b +
                aces.second_send_total_b -
                aces.second_send_goal_b
              }}/{{ aces.first_send_win_b + aces.second_send_total_b }}({{
                aces.catch_score_a
              }}%)
            </div>
            <div>接发球得分率</div>
            <div>
              {{
                aces.first_send_win_a -
                aces.first_send_goal_a +
                aces.second_send_total_a -
                aces.second_send_goal_a
              }}/{{ aces.first_send_win_a + aces.second_send_total_a }}({{
                aces.catch_score_b
              }}%)
            </div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{ color_one: aces.catch_score_a > aces.catch_score_b }"
                :style="{ width: '' + aces.catch_score_a + '%' }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{ color_one: aces.catch_score_b > aces.catch_score_a }"
                :style="{ width: '' + aces.catch_score_b + '%' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>
              {{ aces.retrieve_game_point_a }}/{{
                aces.game_point_b + aces.retrieve_game_point_a
              }}({{ aces.save_game_point_a }}%)
            </div>
            <div>挽回破发点</div>
            <div>
              {{ aces.retrieve_game_point_b }}/{{
                aces.game_point_a + aces.retrieve_game_point_b
              }}({{ aces.save_game_point_b }}%)
            </div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{
                  color_one: aces.save_game_point_a > aces.save_game_point_b,
                }"
                :style="{ width: '' + aces.save_game_point_a + '%' }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{
                  color_one: aces.save_game_point_b > aces.save_game_point_a,
                }"
                :style="{ width: '' + aces.save_game_point_b + '%' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>
              {{ aces.game_point_a }}/{{
                aces.game_point_a + aces.retrieve_game_point_b
              }}({{ aces.success_game_point_a }}%)
            </div>
            <div>成功破发</div>
            <div>
              {{ aces.game_point_b }}/{{
                aces.game_point_b + aces.retrieve_game_point_a
              }}({{ aces.success_game_point_b }}%)
            </div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{
                  color_one:
                    aces.success_game_point_a > aces.success_game_point_b,
                }"
                :style="{ width: '' + aces.success_game_point_a + '%' }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{
                  color_one:
                    aces.success_game_point_b > aces.success_game_point_a,
                }"
                :style="{ width: '' + aces.success_game_point_b + '%' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>
              {{
                aces.first_area_goal_a +
                aces.first_area_total_b -
                aces.first_area_goal_b
              }}/{{ aces.first_area_total_a + aces.first_area_total_b }}({{
                aces.first_area_score_a
              }}%)
            </div>
            <div>一区得分率</div>
            <div>
              {{
                aces.first_area_goal_b +
                aces.first_area_total_a -
                aces.first_area_goal_a
              }}/{{ aces.first_area_total_a + aces.first_area_total_b }}({{
                aces.first_area_score_b
              }}%)
            </div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{
                  color_one: aces.first_area_score_a > aces.first_area_score_b,
                }"
                :style="{ width: '' + aces.first_area_score_a + '%' }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{
                  color_one: aces.first_area_score_b > aces.first_area_score_a,
                }"
                :style="{ width: '' + aces.first_area_score_b + '%' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>
              {{
                aces.second_area_goal_a +
                aces.second_area_total_b -
                aces.second_area_goal_b
              }}/{{ aces.second_area_total_a + aces.second_area_total_b }}({{
                aces.second_area_score_a
              }}%)
            </div>
            <div>二区得分率</div>
            <div>
              {{
                aces.second_area_goal_b +
                aces.second_area_total_a -
                aces.second_area_goal_a
              }}/{{ aces.second_area_total_a + aces.second_area_total_b }}({{
                aces.second_area_score_b
              }}%)
            </div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{
                  color_one:
                    aces.second_area_score_a > aces.second_area_score_b,
                }"
                :style="{ width: '' + aces.second_area_score_a + '%' }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{
                  color_one:
                    aces.second_area_score_b > aces.second_area_score_a,
                }"
                :style="{ width: '' + aces.second_area_score_b + '%' }"
              ></div>
            </div>
          </div>
        </div>
        <div class="aces">
          <div class="aces_title">
            <div>{{ aces.total_score_a }}</div>
            <div>总得分</div>
            <div>{{ aces.total_score_b }}</div>
          </div>
          <div class="color">
            <div class="color_left">
              <div
                class="color_two"
                :class="{ color_one: aces.total_score_a > aces.total_score_b }"
                :style="{ width: '100%' }"
              ></div>
            </div>
            <div class="color_right">
              <div
                class="color_two"
                :class="{ color_one: aces.total_score_b > aces.total_score_a }"
                :style="{ width: '100%' }"
              ></div>
            </div>
          </div>
        </div>
      </div>
      <div v-if="!show">暂无数据</div>
    </div>

    <!-- selected == 1 -->
    <div v-if="selected == 1" style="background: #fff">
      <div v-if="display">
        <div class="name">
          <div class="disk">
            <span
              class="tabs_coulm"
              :class="{ actives: selecteds == index }"
              v-for="(slide, index) in tabs"
              :key="index"
              @click.stop="realTimeTabs(index)"
              >{{ slide }}</span
            >
          </div>
        </div>

        <div v-for="(match, index) in realTimeList" :key="index">
          <div class="realTimeLeft"></div>
          <div class="battle" style="margin-top:0">
            <div class="battle-top" style="margin-bottom:10px" >
              <div class="name_" style="width: 34%">
                <span class="player">
                  <span class="playerName">{{ match.left.user_a }}</span>
                  <i
                    class="iconfont icon-yuan green"
                    v-if="match.left.user_a.indexOf(match.left.serve_user) >= 0"
                  ></i>
                </span>
                <span class="player" style="margin-top: 0.1rem">
                  <span class="playerName">{{ match.left.user_b }}</span>
                  <i
                    class="iconfont icon-yuan green"
                    v-if="match.left.user_b.indexOf(match.left.serve_user) >= 0"
                  ></i>
                </span>
              </div>
              <div style="display: flex; width: 65%; justify-content: flex-end">
                <div class="flex">
                  <div class="flex_width">
                    <div class="score">
                      <div
                        v-for="(round_nums, middleIndex_a) in match.middle"
                        :key="middleIndex_a"
                      >
                        <div class="point">
                          <i
                            class="iconfont icon-yuan"
                            :class="{
                              winer: round_nums.top == 1,
                              loser: round_nums.top == 2,
                              ace: round_nums.top == 3,
                              double_fault: round_nums.top == 4,
                              recovery_breakage: round_nums.top == 5,
                            }"
                          ></i>
                        </div>
                      </div>
                    </div>
                    <div class="score">
                      <div
                        v-for="(round_num, middleIndex_b) in match.middle"
                        :key="middleIndex_b"
                      >
                        <div class="point">
                          <i
                            class="iconfont icon-yuan"
                            :class="{
                              winer: round_num.bot == 1,
                              loser: round_num.bot == 2,
                              ace: round_num.bot == 3,
                              double_fault: round_num.bot == 4,
                              recovery_breakage: round_num.bot == 5,
                            }"
                          ></i>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div style="margin-top: 0.14rem">
                  <div class="point borderLeft">
                    {{ match.right.round_num.top }}
                  </div>
                  <div class="point borderLeft">
                    {{ match.right.round_num.bot }}
                  </div>
                </div>
              </div>
            </div>
            <div class="battle-line"></div>
          </div>
        </div>

        <div class="info">
          <span>
            <i class="iconfont icon-yuan green"></i>
            发球人
          </span>
          <span>
            <i class="iconfont icon-yuan ace"></i>
            ACE
          </span>
          <span>
            <i class="iconfont icon-yuan double_fault"></i>
            双误
          </span>
          <span>
            <i class="iconfont icon-yuan recovery_breakage"></i>
            挽回破发
          </span>
        </div>
        <div class="Identification">
          <span>
            <i class="iconfont icon-yuan winer"></i>
            胜
          </span>
          <span>
            <i class="iconfont icon-yuan loser"></i>
            负
          </span>
        </div>
      </div>
      <div v-else style="margin-top: 20px">暂无数据</div>
    </div>

    <!-- selected == 2 -->
    <div v-if="selected == 2" style="background: #fff">
      <div class="name names">
        <div>{{ userA }}</div>
        <div>{{ userB }}</div>
      </div>
      <div class="aces">
        <div class="aces_title">
          <div style="width: 20%; text-align: left" v-if="player[0].age">
            {{ player[0].age }}
          </div>
          <div style="width: 20%">年龄(岁)</div>
          <div style="width: 20%; text-align: right" v-if="player[1].age">
            {{ player[1].age }}
          </div>
        </div>
        <div class="color">
          <div class="color_left">
            <div :style="{ width: '100%' }"></div>
          </div>
          <div class="color_right">
            <div :style="{ width: '100%' }"></div>
          </div>
        </div>
      </div>
      <div class="aces">
        <div class="aces_title">
          <div style="width: 20%; text-align: left">{{ player[0].height }}</div>
          <div style="width: 20%">身高(cm)</div>
          <div style="width: 20%; text-align: right">
            {{ player[1].height }}
          </div>
        </div>
        <div class="color">
          <div class="color_left">
            <div :style="{ width: '100%' }"></div>
          </div>
          <div class="color_right">
            <div :style="{ width: '100%' }"></div>
          </div>
        </div>
      </div>
      <div class="aces">
        <div class="aces_title">
          <div style="width: 20%; text-align: left">{{ player[0].weight }}</div>
          <div style="width: 20%">体重(kg)</div>
          <div style="width: 20%; text-align: right">
            {{ player[1].weight }}
          </div>
        </div>
        <div class="color">
          <div class="color_left">
            <div :style="{ width: '100%' }"></div>
          </div>
          <div class="color_right">
            <div :style="{ width: '100%' }"></div>
          </div>
        </div>
      </div>
      <div class="aces">
        <div class="aces_title">
          <div style="width: 40%; text-align: left">
            {{ player[0].one_limit
            }}{{ player[0].two_limit ? "/" + player[0].two_limit : ""
            }}{{ player[0].three_limit ? "/" + player[0].three_limit : "" }}
          </div>
          <div style="width: 20%">单位</div>
          <div style="width: 40%; text-align: right">
            {{ player[1].one_limit
            }}{{ player[1].two_limit ? "/" + player[1].two_limit : ""
            }}{{ player[1].three_limit ? "/" + player[1].three_limit : "" }}
          </div>
        </div>
        <div class="color">
          <div class="color_left">
            <div :style="{ width: '100%' }"></div>
          </div>
          <div class="color_right">
            <div :style="{ width: '100%' }"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import sdk from "../../../../wxsdk/sdk.js"; //引入sdk.js
import { HOST } from "../../../../main.js";
import matchBattle from "../../../../components/match/matchBattle";
import LiveVideo from "../../../../components/video";
export default {
  components: {
    matchBattle,
    LiveVideo,
  },
  data() {
    return {
      not_shadow: true,
      titles: ["技术统计", "计分回看", "选手详情"],
      selected: 0,
      selecteds: 0,
      activeTab: this.$route.query.status,
      battleList: [],
      group: "",
      name: "",
      match_date: "",
      com_id: null,
      indexs: this.$route.query.indexs,
      aces: [],
      player: [{}, {}],
      plate: 1,
      disk: [],
      tabs: [],
      show: true,
      userA: "",
      userB: "",
      list: [],
      realTimeList: [],
      display: null,
      cover: this.$route.query.cover,
      device_url: this.$route.query.device_url,
      liveStatus: false,
      formalUrl: "",
      title: "",
      mark: 0,
      pandect_id: 0,
      lastPath:sessionStorage.getItem("lastPath")||""
    };
  },
  props: {},
  // computed: {
  //   title() {
  //     return this.$route.query.name + '——' + this.$route.query.ground;
  //   },
  // },
  mounted() {
      // this.count(0);
    this.pandect_id = this.$route.query.pandect_id;
    this.mark = this.$route.query.mark;
    this.com_id = localStorage.getItem("index");
    this.title = this.$route.query.name + "——" + this.$route.query.ground;
    if (this.$route.query.status == 2 || this.lastPath !== "") {
      this.initWebSocket();
      this.battleList.push(JSON.parse(localStorage.getItem("matchsIndex")));
      this.group = this.battleList[0].group_id;
      this.formalUrl =
        HOST +
        "mobile/#/match/detail/matchSchedule?id="
        +this.battleList[0].com_id
        +"&name="+this.battleList[0].name
        +"&defaultId=7"
        +"&backhome=true";
      this.count(0);
      this.wxShare();
      this.getLiveStatus(2);
    }
    else if (this.$route.query.status == 3) {

       this.battleList.push(JSON.parse(localStorage.getItem("matchsIndex")));
      // console.log(this.battleList);
       this.formalUrl =
        HOST +
        "mobile/#/match/endCheck?id=" 
        +this.battleList[0].com_id 
        +"&name="+this.battleList[0].name
        +"&backhome=true";
      // this.initWebSocket();
      setTimeout(() => {
        this.wxShare();
      }, 1000);
       this.count(0);
       this.getLiveStatus(3);
    }
  },
  methods: {
    getLiveStatus(type) {
     
      if (type === 2)
       {
          // this.formalUrl =
        //   HOST +
        //   "mobile/#/match/detail/MatchDetailGoing?backhome=true&back_id=" +
        //   this.battleList[0].com_id;
           this.formalUrl =
        HOST +
        "mobile/#/match/detail/matchSchedule?id="
        +this.battleList[0].com_id
        +"&name="+this.battleList[0].name
        +"&defaultId=7"
        +"&backhome=true";
       }
        if (type === 3)
       {
           this.formalUrl =
        HOST +
        "mobile/#/match/endCheck?id=" 
        +this.battleList[0].com_id 
        +"&name="+this.battleList[0].name
         +"&defaultId=7"
        +"&backhome=true";
       }
      let params = new URLSearchParams();
      params.append("com_id", this.battleList[0].com_id);
      params.append("ground_name", this.battleList[0].ground_name);
      this.$axios
        .post("/mobile/ScoreSheet/get_device_status", params)
        .then((res) => {
          const { code, data } = res.data;
          if (code == 2000) {
            this.liveStatus = true;
            this.cover = data.cover;
            this.device_url = data.device_url;
          } else {
            this.liveStatus = false;
          }
        })
        .catch((res) => {});
    },
    initWebSocket() {
      var _this = this;
      var ws = new WebSocket("ws://47.105.210.146:8080"); //正式服
      // var ws = new WebSocket("ws://47.104.64.239:8080"); //测试服
      ws.onopen = function () {
        var logindata =
          '{"type":"details","com_id":"' +
          _this.com_id +
          '","group_id":"' +
          _this.group +
          '","status":"' +
          _this.activeTab +
          '","match_date":"' +
          _this.match_date +
          '","search":"' +
          _this.name +
          '","pandect_id":"' +
          _this.pandect_id +
          '","mark":"' +
          _this.mark +
          '"}';
        ws.send(logindata);
      };
      ws.onmessage = function (e) {
        var data = JSON.parse(e.data);
        switch (data.type) {
          case "ping":
            ws.send(
              '{"type":"details","com_id":"' +
                _this.com_id +
                '","group_id":"' +
                _this.group +
                '","status":"' +
                _this.activeTab +
                '","match_date":"' +
                _this.match_date +
                '","search":"' +
                _this.name +
                '","pandect_id":"' +
                _this.pandect_id +
                '","mark":"' +
                _this.mark +
                '"}'
            );
            break;
          case "details":
            let values = [];
            values.push(data.gaming);
            // values.push(data.gaming[_this.indexs]);
            if (values != "") {
              _this.battleList = values;
              let plate = ["全部"];
              for (let i = 0; i < _this.battleList[0].round_num.length; i++) {
                plate.push("第" + (i + 1) + "盘");
              }
              _this.disk = plate;
              _this.count(0);
              _this.getLiveStatus(2);
              _this.realTime(_this.selecteds);
            }
            break;
        }
      };
      _this.$router.afterEach(function () {
        ws.close();
      });
    },
    wxShare() {
      let url = window.location.href.split("#")[0];
      let matchName = localStorage.getItem("name");
      let matchLogo = localStorage.getItem("logo")
        ? localStorage.getItem("logo")
        : "http://www.tissys.com/default_logo.png";
      let obj = {
        title: `${matchName}正在进行，前来围观我的技术统计吧...`, //分享标题
        desc: `${this.userA}vs${this.userB}`, //分享内容
        linkurl:
          location.protocol +
          "//" +
          location.host +
          "/mobile/#" +
          window.location.href.split("#")[1], //分享链接
        img: matchLogo, //分享内容显示的图片
      };
      sdk.getJSSDK(url, obj); //传入sdk.js需要的参数
    },
    count(index) {
      this.userA = this.battleList[0].clash_info.name_a;
      this.userB = this.battleList[0].clash_info.name_b;
      var params = new URLSearchParams();
      let mark = this.battleList[0].mark ? this.battleList[0].mark : 0;
      if (this.battleList[0].clash_info.team_name_a) {
        mark = 1;
      }
      params.append("pandect_id", this.battleList[0].id);
      params.append("plate", this.selecteds);
      params.append("mark", mark);
      params.append("user_id_a", this.battleList[0].clash_info.user_id_a);
      params.append("sign_id_a", this.battleList[0].clash_info.sign_id_a);
      params.append("user_id_b", this.battleList[0].clash_info.user_id_b);
      params.append("sign_id_b", this.battleList[0].clash_info.sign_id_b);
      this.$axios
        .post("/mobile/v1/Technology/skill_stat", params)
        .then((res) => {
          if (res.data.code == 2000) {
            if (res.data.data == "") {
              this.show = false;
              let plate = ["全部"];
              for (let i = 0; i < 3; i++) {
                plate.push("第" + (i + 1) + "盘");
              }
              this.disk = plate;
            } else {
              this.show = true;
              this.aces = res.data.data;
            }
          }
        })
        .catch((res) => {
          //  console.log(res.msg);
        });
    },
    tabChoose(index) {
      this.selected = index;
      if (index == 2) {
        this.playerInfo();
      }
      if (index == 1) {
        this.realTime(this.selecteds);
      }
    },
    realTime(index) {
      let mark = this.battleList[0].mark ? this.battleList[0].mark : 0;
      if (this.battleList[0].clash_info.team_name_a) {
        mark = 1;
      }
      let params = new URLSearchParams();
      params.append("pandect_id", this.battleList[0].id);
      params.append("mark", mark);
      this.$axios
        .post("/mobile/ScoreSheet/final_result", params)
        .then((res) => {
          if (res.data.code == 2000) {
            let plate = [];
            for (let i = 0; i < res.data.data.length; i++) {
              plate.push("第" + (i + 1) + "盘");
            }
            this.display = res.data.data.length == 0 ? false : true;
            this.tabs = plate;
            this.list = res.data.data;
            this.realTimeList = this.list[index];
          }
        })
        .catch((res) => {
          //  console.log(res.msg);
        });
    },
    realTimeTabs(index) {
      this.selecteds = index;
      this.realTimeList = this.list[this.selecteds];
    },
    playerInfo() {
      this.group = this.battleList[0].group_id;
      let params = new URLSearchParams();
      params.append("user_id_a", this.battleList[0].clash_info.user_id_a);
      params.append("user_id_b", this.battleList[0].clash_info.user_id_b);
      params.append("group_id", this.group);
      this.$axios
        .post("/mobile/v1/technology/player_details", params)
        .then((res) => {
          if (res.data.code == 2000) {
            this.player = res.data.data;
            this.player[0].one_limit = this.battleList[0].clash_info.one_limit_a;
            this.player[1].one_limit = this.battleList[0].clash_info.one_limit_b;
            this.player[0].two_limit = this.battleList[0].clash_info.two_limit_a;
            this.player[1].two_limit = this.battleList[0].clash_info.two_limit_b;
            this.player[0].three_limit = this.battleList[0].clash_info.three_limit_a;
            this.player[1].three_limit = this.battleList[0].clash_info.three_limit_b;
          }
        })
        .catch((res) => {
          //  console.log(res.msg);
        });
    },
    disks(index) {
      this.selecteds = index;
      this.count(index);
    },
  },
  beforeRouteLeave(to, from, next) {
    if (to.path == "/match/endCheck") {
      to.query.defaultId = 3;
    }
    next();
  },
  beforeRouteEnter(to,from,next){
    if(from.path === "/match/detail/MatchDetailEnd"){
      sessionStorage.setItem("lastPath","/match/detail/MatchDetailEnd")
    }else{
       sessionStorage.setItem("lastPath","")
    }
    next()
  }
};
</script>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 0.9rem;
  font-size: 0.36rem;
  line-height: 0.9rem;
  display: flex;
  justify-content: space-between;
  box-shadow: 0 0.01rem 0.02rem #aaa;
  position: fixed;
  top: 0;
  z-index: 9999;
  background: #fff;
  a {
    color: #000;
    margin-left: 0.1rem;
    text-align: center;
    display: block;
    width: 0.9rem;
    i {
      display: inline-block;
    }
  }
  span {
    // width: 80%;
    flex: 1;
    float: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  img {
    width: 35px;
    height: 35px;
    margin-top: 5px;
    margin-right: 5%;
  }
}
.have {
  position: absolute;
  background: #fff;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.tabs {
  width: 100%;
  height: 0.94rem;
  display: flex;
  justify-content: space-between;
  background: #c7e9d6;
  margin-top: 0.32rem;

  .tabs_coulm {
    width: 33.333333%;
    color: #42b574;
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: center;
  }
}

.active:after {
  content: "";
  display: inline-block;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  border-bottom: 2px #42b574 solid;
}

.name {
  display: flex;
  justify-content: space-between;
  margin: 0.28rem 0 0.34rem;
  padding: 0 0.2rem;
  color: #259b24;

  .disk {
    width: 70%;
    margin: auto;

    span {
      padding: 0 0.1rem;
      margin: 0 0.1rem;
      box-sizing: border-box;
      border: 1px #fff solid;
    }

    .actives {
      border: 1px #259b24 solid;
      box-sizing: border-box;
    }
  }
}

.aces {
  margin-bottom: 0.3rem;

  .aces_title {
    padding: 0 0.2rem;
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.1rem;
  }

  .color {
    display: flex;
    justify-content: space-between;
    height: 0.24rem;
    background: #dddcdc;

    .color_two {
      height: 100%;
      background: #c0e6d1;
    }

    .color_one {
      height: 100%;
      background: #42b574;
    }

    .color_left {
      display: flex;
      justify-content: flex-end;
      width: 50%;
    }

    .color_right {
      display: flex;
      justify-content: flex-start;
      width: 50%;
    }
  }
}

.names {
  margin: 0.5rem 0 0.26rem;
}

.green,
.ace,
.double_fault {
  font-size: 0.22rem;
  width: 0.5rem;
  height: 100%;
  text-align: center;
  color: #8bc34a;
}

.info {
  padding-top: 0.18rem;
  margin: 0.66rem 0.2rem 0 0.2rem;
  border-top: 1px #ccc solid;

  span {
    margin: 0 0.2rem;
  }

  .ace {
    color: #1352ec;
  }

  .double_fault {
    color: #ff9800;
  }

  .recovery_breakage {
    font-size: 12px;
    color: #b43e3a;
  }
}

.Identification {
  margin-top: 0.2rem;
  padding-bottom: 0.2rem;

  .winer {
    color: #8c8a8a;
    font-size: 12px;
  }

  .loser {
    color: #bbbbbb;
    font-size: 8px;
    margin-left: 0.5rem;
  }
}

.flex_width {
  width: 200%;
}

.battle-top {
  display: flex;
  justify-content: space-between;
}

.flex {
  display: flex;
  width: 100%;
  overflow-x: scroll;
}

.battle {
  margin: 0.15rem 0.4rem 0.12rem;
  position: relative;
  margin-top: 1.2rem;

  .battle-line {
    height: 0.04rem;
    background: #bbbbbb;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
  }

  .player {
    text-align: left;
    display: flex;
    align-items: center;

    .playerName {
      font-weight: bold;
      font-size: 0.3rem;
      display: block;
      max-width: 100%;
      overflow-x: scroll;
      white-space: nowrap;
    }
  }

  .score {
    display: flex;
    justify-content: flex-end;
    height: 0.45rem;
    align-items: center;

    .borderLeft {
      border-left: 0.02rem solid #bbbbbb;
    }

    .point {
      width: 0.5rem;
      font-weight: bold;
      position: relative;

      .double_fault {
        color: #ff9800;
      }

      .recovery_breakage {
        font-size: 12px;
        color: #b43e3a;
      }

      .winer {
        color: #8c8a8a;
        font-size: 12px;
      }

      .loser {
        color: #bbbbbb;
        font-size: 8px;
      }

      .ace {
        color: #1352ec;
      }
    }
  }
}
</style>
